<title>右键菜单</title>

<div class="page animation-fade">
    <div class="page-header">
        <h1 class="page-title">右键菜单</h1>
        <div class="page-header-actions">
            <a class="btn btn-inverse btn-round" href="http://sydcanem.com/bootstrap-contextmenu/" target="_blank">
                <i class="icon wb-link" aria-hidden="true"></i> <span class="hidden-xs">官网</span></a>
        </div>
    </div>
    <div class="page-content">

        <div class="panel">
            <div class="panel-heading">
                <h3 class="panel-title">示例 <span class="panel-desc">在以下区域鼠标右击查看演示。</span>
                </h3>
            </div>
            <div class="panel-body container-fluid">
                <div class="row row-lg">
                    <div class="col-md-6">

                        <div class="example-wrap">
                            <h4 class="example-title">示例 1</h4>
                            <p>通过 <code>data-toggle="context"</code> 来调用右键菜单</p>
                            <div class="example">
                                <div class="example-well height-200" data-toggle="context" data-target="#contextMenu"></div>
                            </div>

                            <div id="contextMenu">
                                <ul class="dropdown-menu" role="menu">
                                    <li>
                                        <a tabindex="-1"><i class="icon wb-copy" aria-hidden="true"></i> 复制</a>
                                    </li>
                                    <li>
                                        <a tabindex="-1"><i class="icon wb-scissor" aria-hidden="true"></i> 剪切</a>
                                    </li>
                                    <li>
                                        <a tabindex="-1"><i class="icon wb-clipboard" aria-hidden="true"></i> 粘贴</a>
                                    </li>
                                    <li class="divider"></li>
                                    <li>
                                        <a tabindex="-1"><i class="icon wb-share" aria-hidden="true"></i> 分享</a>
                                    </li>
                                </ul>
                            </div>
                        </div>

                    </div>
                    <div class="col-md-6">

                        <div class="example-wrap">
                            <h4 class="example-title">示例 2</h4>
                            <div class="example">
                                <div id="exampleContext" data-toggle="context">这是一段演示文本， <span class="bg-blue-grey-100">除了着重显示的这部分文字外</span>，右击其他部分可以查看效果，这里的右键菜单是通过
                                    JavaScript 调用的。
                                </div>
                                <div id="exampleContextMenu">
                                    <ul class="dropdown-menu" role="menu">
                                        <li>
                                            <a tabindex="-1"><i class="icon wb-copy" aria-hidden="true"></i> 复制</a>
                                        </li>
                                        <li>
                                            <a tabindex="-1"><i class="icon wb-scissor" aria-hidden="true"></i> 剪切</a>
                                        </li>
                                        <li>
                                            <a tabindex="-1"><i class="icon wb-clipboard" aria-hidden="true"></i> 粘贴</a>
                                        </li>
                                        <li class="divider"></li>
                                        <li>
                                            <a tabindex="-1"><i class="icon wb-share" aria-hidden="true"></i> 分享</a>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </div>

                    </div>
                    <div class="clearfix"></div>
                    <div class="col-md-6">

                        <div class="example-wrap">
                            <h4 class="example-title">示例 3</h4>
                            <p>获取菜单名称，请单击菜单项查看。</p>
                            <div class="example">
                                <div class="example-well height-200" id="exampleContext2" data-toggle="context"></div>
                            </div>
                        </div>

                    </div>
                </div>
            </div>
        </div>

    </div>
</div>

<script src="/vendor/bootstrap-contextmenu/bootstrap-contextmenu.min.js"></script>
<script src="/js/examples/components/advanced/context-menu.js"></script>
